<template>
  <!--h-screen-->
  <view style="padding-bottom: 100rpx">
    <view v-if="total" class="">
      <view class="px-4 relative">
        <view class="btn-fix w-full h-10 flex justify-center text-white items-center bg-indigo-500 rounded-3xl" @click="jumpIncrease">新增子账号</view>

        <view class="pt-16">
          <view class="bg-white rounded-2xl flex box-border px-4 py-4 flex items-center mb-4" v-for="item in subList" @click="jumpEditSub(item.uid)">
            <!--<image class="w-10 h-10 rounded-full" src="@/static/image/ava.jpg"></image>-->
            <image class="w-10 h-10 rounded-full" :src="item.avatar"></image>
            <view class="ml-2">
              <view class="text-sm">{{ item.nickname }} ({{ item.uid }})</view>
              <view class="text-xs text-zinc-400">{{ item.phone }}</view>
            </view>
            <view class="ml-auto text-right">
              <view class="text-sm">分成: {{ item.wallet }}</view>
              <view class="text-xs text-zinc-400">{{ moment(item.add_time * 1000).format('YYYY/MM/DD HH:mm:ss') }}</view>
            </view>

          </view>
        </view>

        <view>
          <uni-load-more :status="loadStatus"></uni-load-more>
        </view>
      </view>

    </view>

    <!--无子账号list-->
    <view class="sub-ht flex flex-col justify-center items-center" v-else>
      <image class="w-20 h-20" src="@/static/image/empty.png"></image>
      <view class="w-52 h-10 mt-4 flex justify-center text-white items-center bg-indigo-500 rounded-3xl" @click="jumpIncrease">新增子账号</view>
    </view>


  </view>

  <TabBar></TabBar>
</template>

<script setup lang="ts">
    import moment from 'moment'
    import { ref, onMounted } from "vue";
    import { getSubListApi } from '@/api/increaseSub/index';
    import TabBar from '@/components/TabBar.vue';
    import { onReady, onReachBottom, onShow } from '@dcloudio/uni-app';

    onReady(() => {
      uni.hideTabBar()
    })

    onMounted(() => {
      getSubList()
    })

    onShow(() => {
      uni.$off('updateSubList')
      uni.$on('updateSubList', function (data) {
        // console.log('data===', data)
        if(data.status) {
          /** 重置 **/
          pageQuery.value.page = 1
          subList.value = []
          total.value = 0
          loadStatus.value = 'loading'
          uni.pageScrollTo({
            scrollTop: 0,
            duration: 10
          })
          getSubList()
        }
      })
    })


    const pageQuery = ref<PageQuery>({
      page: 1,
      limit: 10
    })

    const total = ref<number>(0)
    const subList = ref<any[]>([])
    const loadStatus = ref('loading')

    const getSubList = async() => {
      const res = await getSubListApi( pageQuery.value )
      subList.value = [...subList.value, ...res.data.data]
      total.value = res.data.total
      loadStatus.value = 'noMore'
    }

    /** 修改子账号 **/
    const jumpEditSub = (id) => {
      uni.navigateTo({ url: '/pages/subAccount/editSub?utid=' + id })
    }

    /** 新增子账号 **/
    const jumpIncrease = () => {
      uni.navigateTo({ url: '/pages/subAccount/increaseSub' })
    }

    /** 滚动底部 **/
    onReachBottom(() => {
      if(subList.value.length < total.value) {
        loadStatus.value = 'loading'
        pageQuery.value.page += 1
        getSubList()
      }
    })
</script>

<style scoped lang="scss">
page {
  //min-height: calc(100vh - 200px);
  min-height: 100vh;
  background: #f5f5f5;
}

.btn-fix {
  position: fixed;
  z-index: 99;
  top: 20rpx;
  width: 80%;
  left: 50%;
  transform: translateX(-50%);
}

.sub-ht {
  height: calc(100vh - 50px);
}

.pt-16 {
  &>view:last-child {
   margin-bottom: 0;
  }
}
</style>
